<!--
 * @Author: zh
 * @Date: 2025-01-23 13:44:49
 * @LastEditors: zh
 * @LastEditTime: 2025-01-23 15:52:57
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 柱状图示例</title>
    <!-- 引入 ECharts 的 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        /* 设置图表容器的大小 */
        #chart1 {
            width: 600px;
            height: 400px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <!-- 图表容器 -->
    <div id="chart1"></div>

    <script>
        // 初始化图表
        var myChart = echarts.init(document.getElementById("chart1"), 'shine');
        var data1 = [
            { name: "a", xx: 20, sx: 40, receipt_qty: 18 },
            { name: "b", xx: 20, sx: 30, receipt_qty: 25 },
            { name: "c", xx: 30, sx: 40, receipt_qty: 37 },
            { name: "d", xx: 33, sx: 45, receipt_qty: 48 },
        ]
        var zValues = data1.map(n => (n.receipt_qty - n.xx) > 0 ? 100 : 0);
        // 配置项
        var option = {
            color: ["#7179CB", "#4CCEFE", "#FF6384"], // 添加新的颜色用于中间值
            title: {
                text: "统计总量",
                textStyle: {
                    fontSize: 16,
                    padding: "10px"
                }
            },
            legend: {
                data: ["模具寿命标准", "产量",], // 添加中间值到图例
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
                textStyle: {
                    align: "left",
                },
                formatter: (params) => {
                    if (params.length === 0) {
                        return ""; // 如果没有数据，则不显示提示信息
                    }
                    let tooltipContent = `<div style="margin: 0px 0 0;line-height:1; display:flex;align-items:center;justify-content:space-between;flex-direction:column;"> `;
                    tooltipContent += `<div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${params[0].name} </div>`;

                    // 使用 Set 来记录已经处理过的 seriesName

                    // 遍历 params，根据图表类型和数据生成提示框内容
                    params.forEach((item) => {
                        const index = item.dataIndex;
                        const n = data1[index];
                        tooltipContent += `
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;width:100%;">
        <div style="text-align:left;margin: 10px 0 0;line-height:1;">
          <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:transparent"></span>${item.seriesName === "模具寿命标准" ? "下限-上限" : item.seriesName
                            }:</div>
        <div style="color:#707070;font-weight:bold;text-align:right;margin: 10px 0 0;line-height:1;padding-left:16px;">${item.seriesName === "模具寿命标准"
                                ? `${n.xx}-${n.sx}`
                                : item.seriesName === "剩余寿命"
                                    ? `${Number(n.sx) - Number(n.receipt_qty)}`
                                    : n.receipt_qty
                            }</div>
      </div>
    `;
                    });

                    tooltipContent += "</div>";
                    return tooltipContent;
                },
            },
            xAxis: {
                data: ['a', 'b', 'c', 'd']
            },
            yAxis: {
                splitArea: { show: false }
            },
            series: [
                {
                    barWidth: 20,
                    barGap: "-100%", /* 这里设置包含关系 */
                    data: data1.map(n => n.xx),
                    name: "剩余寿命",
                    type: "bar",
                    stack: "total",
                    itemStyle: {
                        color: "transparent"
                    },
                },
                {
                    barWidth: 20,
                    data: data1.map(n => n.sx - n.xx), // 确保数据为数字类型
                    name: "模具寿命标准",
                    type: "bar",
                    stack: "total",
                    itemStyle: {
                        color: "transparent", // 设置柱子颜色为透明
                        borderColor: "red", // 设置边框颜色
                        borderWidth: 2, // 设置边框宽度
                        borderType: "dashed", // 设置边框为虚线
                    },
                    z: 100,
                },
                {
                    barGap: "-100%", /* 这里设置包含关系 */
                    barWidth: 20,
                    data: data1.map(n => n.receipt_qty), // 确保数据为数字类型
                    name: "产量",
                    type: "bar",

                },

            ]
        };


        // 设置图表的配置项
        myChart.setOption(option, true);
    </script>
</body>

</html>